<!-- 地图 -->
<template>
	<view class="publish-mapBox">
		<map style="width: 100%; height: 260rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"  @tap="setMapClick"></map>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			
			submit:{
				type: Function,
				default: ()=>{}
			}
		},
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				latitude: 28.23445 ,
				longitude: 112.94536,
				covers: [{
					title: '长沙市政府',
					latitude: 28.23445,
					longitude: 112.94536,
					iconPath: '/static/images/location.png',
					width: 24,
					height: 36
				}]
			};
		},
		watch: {
			data: {
				handler() {
					if (Object.keys(this.data).length > 0) {
						
						
						
						this.latitude = this.data.latitude
						this.longitude = this.data.longitude
						
						this.covers[0].title = this.data.title
						this.covers[0].latitude =  this.data.latitude
						this.covers[0].longitude =  this.data.longitude
						
						
						
					}else{
						this.mapDataInit()
					}
					
					console.log(this.data, '看看传入的');
					
					
				},
				deep: true,
				immediate: true
			}
		},
		
		methods:{
			/**
			 * 触发点击事件
			 */
			setMapClick(){
				console.log('点');
				this.$emit('submit')
			},
			
			
			/**
			 * 在未选择地址时，初始化显示当前位置
			 */
			async mapDataInit(){
				// 获取当前定位
				
				let location = await new Promise(function(resolve, reject) {
					uni.getLocation({
						success: ({
							latitude,
							longitude
						}) => {
							console.log('uni定位成功', latitude,longitude);
							// 成功
							resolve({
								latitude,
								longitude
							})
						},
						fail: err => {
							console.log(err, 'uni定位错误');
							// 失败
							reject(err);
						},
					})
					
				});
				
				this.latitude = location.latitude
				this.longitude = location.longitude
				let obj = {
					title: '',
					latitude: location.latitude,
					longitude: location.longitude
				}
				Object.assign(this.covers[0],obj)
				
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.publish-mapBox {}
</style>